<template>
    <div>
      <div id="map"></div>
    </div>
  </template>
  
  <script>
  //引入
  import Map from "ol/Map"
  import { Tile as TileLayer } from "ol/layer";
  import OSM from 'ol/source/OSM';
  import View from "ol/View"
  import { fromLonLat } from "ol/proj";
  
  export default {
    //   name: 'gis',
    data() {
      return {
        map: {},  //地图容器，后续可能会涉及到map的相关操作，比如map.addLayer等，所以定义成全局的
      }
    },
    methods: {
      //地图初始化方法
      initialMap() {
        //用that代替this，防止某些位置this指向发生变化
        let that = this
        that.map = new Map({
          target: "map", // 让id为map的div作为地图对象的容器
          layers: [
            new TileLayer({
              // 创建一个使用Open Street Map地图源的瓦片图层
              source: new OSM()	//OSM地图
            }),
          ],
          //设置视图，包括中心点，坐标系，默认缩放级别，最大、最小缩放级别
          view: new View({
            projection: 'EPSG:3857',	//坐标系
            center: fromLonLat([120.2, 30.35]),	//中心点
            zoom: 10,	  //默认缩放级别
            minZoom: 1,	//最小缩放级别
            maxZoom: 18	//最大缩放级别
          })
        })
        console.log(that.map.getLayers())
      },
  
    },
    mounted() {
      this.initialMap()	//立即执行初始化地图方法
    }
  }
  </script>
  
  <style scoped></style>